<div id="peers_page" class="page">
  <section class="content-header">
    <h1 data-i18n="peers">Peers</h1>
  </section>
  <section class="content">
    <div class="row">
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-aqua">
          <div class="inner inner-smaller">
            <h3><span id="peers_uploaded_volume" id="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="uploaded_volume">Uploaded Volume</p>
          </div>
          <div class="icon"><i class="fas fa-upload"></i></div>
          <div class="small-box-footer"></div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-green">
          <div class="inner inner-smaller">
            <h3><span id="peers_downloaded_volume" id="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="downloaded_volume">Downloaded Volume</p>
          </div>
          <div class="icon" style="bottom:-12px"><i class="fas fa-download"></i></div>
          <div class="small-box-footer"></div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-yellow">
          <div class="inner inner-smaller">
            <h3><span id="peers_connected" id="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="connected_peers">Connected Peers</p>
          </div>
          <div class="icon" style="bottom:-12px"><i class="fab fa-connectdevelop"></i></div>
          <div class="small-box-footer"></div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-red">
          <div class="inner inner-smaller">
            <h3><span id="peers_up_to_date" id="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="up_to_date_peers">Up-to-date Peers</p>
          </div>
          <div class="icon"><i class="fas fa-chart-pie"></i></div>
          <div class="small-box-footer"></div>
        </div>
      </div>
    </div>
    <div class="data-container data-loading">
      <table class="table table-striped table-hover" id="peers_table">
        <thead>
          <tr>
            <th data-i18n="address">Address</th>
            <th data-i18n="downloaded">Downloaded</th>
            <th data-i18n="uploaded">Uploaded</th>
            <th data-i18n="application">Application</th>
            <th data-i18n="platform">Platform</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <div class="data-loading-container"><i class="fas fa-circle-notch fa-spin fa-3x" style="display: block;"></i></div>
      <div class="data-empty-container">
        <p data-i18n="no_peers_found">No peers found.</p>
      </div>
    </div>
  </section>
</div>